<template>
    <div>
        <Divider class="component-blue" orientation="left">扩展图标XIcon</Divider>
        <div style="font-size: 12px; margin-bottom: 10px">Ionicons：</div>
        <XIcon type="md-ionic" size="26" />
        <div style="font-size: 12px; margin: 10px 0">iconfont：</div>
        <XIcon type="iconfont icon-github" size="26" />
        <div style="font-size: 12px; margin: 10px 0">URL：</div>
        <XIcon type="https://ooo.0o0.ooo/2019/04/28/5cc5a71a6e3b6.png" size="30" />
        <div style="font-size: 12px; margin: 10px 0">Base64：</div>
        <XIcon :type="base64" size="26" />
        <h3 class="component-article">基础用法</h3>
        基本用法，已全局挂载直接使用皆可，兼容Ionicons、iconfont、图片链接URL、Base64。
        <code>{{ code }}</code>
        <h3 class="component-article">props</h3>
        <Table :columns="props" :data="data1" border size="small" width="1000"></Table>
    </div>
</template>
<script>
import { props, events, methods } from './columns';
export default {
    components: {},
    data() {
        return {
            code: '<XIcon type="图标名/URL/Base64" />',
            base64: '',
            props: props,
            events: events,
            methods: methods,
            data1: [
                {
                    name: 'type',
                    desc: 'Ionicons或iconfont图标的名称/图片链接URL/Base64',
                    type: 'String',
                    value: '-'
                },
                {
                    name: 'size',
                    desc: '图标的大小，单位是 px',
                    type: 'Number | String',
                    value: '-'
                },
                {
                    name: 'color',
                    desc: '图标的颜色（当传入图片时无效）',
                    type: 'String',
                    value: '-'
                }
            ]
        };
    },
    methods: {},
    mounted() {}
};
</script>
